<template>
	<div class="pie h-full w-full p-4">
		<a-table
			:columns="columns"
			:data="data"
			:pagination="pagination"
			column-resizable
		>
		</a-table>
	</div>
</template>

<script setup>
import { ref, reactive, nextTick, watch, computed } from "vue";
import dayjs from "dayjs";
import { getPie } from "@/api";

const data = computed(() => {
	return getPie()
		.map((item, index) => ({
			...item,
			index: index + 1,
			birth: dayjs(item.code.slice(6, 14)).format("YYYY-MM-DD"),
		}))
		.filter((item) => {
			return (
				dayjs(item.birth).isBefore(dayjs()) &&
				dayjs(item.birth).isAfter(dayjs("1949-10-01"))
			);
		});
});

const columns = [
	{
		title: "序号",
		dataIndex: "index",
		align: "center",
		width: 200,
	},
	{
		title: "位次",
		dataIndex: "id",
		align: "center",
		width: 200,
	},
	{
		title: "号码",
		dataIndex: "code",
		align: "center",
		width: 200,
	},
	{
		title: "生日",
		dataIndex: "birth",
		align: "center",
		width: 200,
		sortable: {
			sortDirections: ["ascend", "descend"],
		},
	},
];

const pagination = {
	defaultPageSize: 20,
	showTotal: true,
};
</script>

<script>
export default {
	name: "Pie",
};
</script>

<style scoped lang="less">
.pie {
}
</style>

<route>
	{
		meta: {
			layout: 'default',
		}
	}
</route>
